<template>
	<view class="index">
		<scroll-view class="header" scroll-x="true">
			<view class="product" v-for="(item, index) in list" :key="index" @click="selected(index)">
				<text :class="[index == Indexes ? 'active' : '']">{{ item.item}}</text>
			</view>
		</scroll-view>
		<view v-if="Indexes==0">
			<newsList :res="contRes"></newsList>    
		</view>
		<view v-else-if="Indexes==1">  
			<newsVideo :res="contRes"></newsVideo> 
		</view>
		<view v-else>
			<friends :res="contRes"></friends>   
		</view>
	</view>
</template>

<script>
	import newsList from '@/components/newsList/newsList.vue';
	import newsVideo from '@/components/newsList/newsVideo.vue';
	import friends from '@/components/newsList/friends.vue';
	export default {
		components: {
			newsList,
			newsVideo,
			friends,
		},
		data() {  
			return {
				Indexes:1, 
				type:'video',
				contRes:'',
				page:1,
				list: [{
					item: '新闻',
					id:'imgtext'
				}, {     
					item: '视频',
					id: 'video'
				}, {
					item: '交友',
					id: 'friend'
				}]
			}
		},
		onLoad:function(){           
			this.getList();  
		},
		methods: {
			selected: function(index) {
				this.Indexes = index;
				this.type=this.list[this.Indexes].id;  
				this.getList();  
			},
			getList(){
				uni.request({
					url: this.baseUrl+"/news",   
					dataType: "json",
					data: {
						type: this.type,
						page:this.page, 
						page_size:10
					},
					success: (res) => {  
						this.contRes = res.data.data.list; 
					}
				})
			}
		},
		onPullDownRefresh() {
			this.getList();
			setTimeout(function () {
				uni.stopPullDownRefresh();  
			}, 1000);
		},
		onNavigationBarButtonTap(){
			uni.navigateTo({
				url: '../fabu/fabu'
			});
		}
	}
</script>

<style lang="scss">
	.index {
		background-color: #f5f6f7;
		width: 100%;

		.header {
			width: 96%;
			display: flex;
			font-size: 28upx;
			height: 80upx;
			padding-left: 30upx;
			background-color: #ffffff;
			position: fixed !important;
			top: 0 !important;
			z-index: 999;

			.product {
				display: inline-block;
				line-height: 80upx;
				padding-right: 80upx;
				color: #666666;
				position: relative;

				.active {
					color: #f33632;
					&:before {
						position: absolute;
						left: auto;
						bottom: 12upx;
						height: 4upx;
						width: 55upx;
						content: '';
						transform: scaleY(0.9);
						background-color: #f33632;
						display: flex;
					}
				}
			}
		}
	}
</style>
